<!-- /**
 * @description: 首页
 * @author: zgg
 * @create: 2021-8-8
 * @update: name(xxxx-xx-xx) 更新日期（本人name可不写）
 * @update: name(xxxx-xx-xx) 其他人修改日期（name建议写）
 */ -->
<template>
  <div class="app-container-index" v-if="data">
    <div class="content-view">
      <div class="content-row">
        <div class="list">
          <div class="col">
            <div class="icon"><svg-icon icon-class="user" /></div>
            <div class="name">账号人数统计</div>
            <div class="number-msg">人数：{{data.today_data.people_num}} / 现金：{{data.today_data.people_balance_sum}}元 / 补贴：{{data.today_data.people_cash_sum}}元</div>
			<div class="number-msg"></div>
          </div>
          <div class="col">
            <div class="icon"><svg-icon icon-class="xiaofeitongji" /></div>
            <div class="name">订单金额</div>
            <div class="number-msg">笔数：{{data.today_data.order_sum}} / 金额：{{data.today_data.income_money_sum}}元</div>
          </div>
          <div class="col">
            <div class="icon"><svg-icon icon-class="chongzhijinre" /></div>
            <div class="name">充值金额</div>
            <div class="number-msg">笔数：{{data.today_data.recharge_sum}} / 金额：{{data.today_data.recharge_money_sum}}元</div>
          </div>
          <div class="col">
            <div class="icon"><svg-icon icon-class="chongzhijinre" /></div>
            <div class="name">补贴金额</div>
             <div class="number-msg">笔数：{{data.today_data.subsidy_sum}} / 金额：{{data.today_data.subsidy_money_sum}}元</div>
          </div>
        </div>
      </div>
      <div class="content-row">
        <div class="tongji">
          <div class="tongji-title">近六月统计</div>
          <el-row v-if="isShow" >
            <line-chart :chart-data="lineChartData" />
          </el-row>
        </div>
		<div style="border-top: 1px solid #e8e8e8;">
			<!-- <div class="tongji-title" style="margin-left: 10px;margin-top: 10px;">昨日统计</div> -->
			<div class="number-list">
			  <div class="col">
				<div class="col-title">日期</div>
				<div class="col-number">{{data.yesterday_data.dateStr}}</div>
			  </div>
			  <div class="col">
				<div class="col-title">日充值金额</div>
				<div class="col-number">{{data.yesterday_data.recharge_money_sum}}</div>
			  </div>
			  <div class="col">
				<div class="col-title">日充值笔数</div>
				<div class="col-number">{{data.yesterday_data.recharge_sum}}</div>
			  </div>
			  <div class="col">
				<div class="col-title">日消费金额</div>
				<div class="col-number">{{data.yesterday_data.income_money_sum}}</div>
			  </div>
			  <div class="col">
				<div class="col-title">日消费笔数</div>
				<div class="col-number">{{data.yesterday_data.order_sum}}</div>
			  </div>
			  <div class="col">
				<div class="col-title">日退款数</div>
				<div class="col-number">{{data.yesterday_data.refund_order_sum || 0}}</div>
			  </div>
			<!--  <div class="col">
				<div class="col-title">总余额</div>
				<div class="col-number">{{data.today_data.people_money_sum}}</div>
			  </div> -->
			<!--  <div class="col">
				<div class="col-title">状态</div>
				<div class="col-number" style="color: #67C23A;">正常</div>
			  </div> -->
			</div>
		</div>
      </div>
      <div class="content-row">
        <div class="icon-list">
          <div class="col active-2" @click="toPage('/one-card/card-list')">
            <div class="icon"><svg-icon icon-class="yiqiatong" /></div>
            <div class="name">开卡</div>
          </div>
          <div class="col active-2">
            <div class="icon"><svg-icon icon-class="chongzhi" /></div>
            <div class="name">充值</div>
          </div>
          <div class="col active-2" @click="toPage('/one-card/card-list')">
            <div class="icon"><svg-icon icon-class="tuika" /></div>
            <div class="name">退卡</div>
          </div>
          <div class="col active-2" @click="toPage('/one-card/card-list')">
            <div class="icon"><svg-icon icon-class="zhuxiao" /></div>
            <div class="name">注销</div>
          </div>
          <div class="col active-2" @click="toPage('/permission/personnelList')">
            <div class="icon"><svg-icon icon-class="zuzhiguanli" /></div>
            <div class="name">组织管理</div>
          </div>
          <div class="col active-2" @click="toPage('/intelligentVideo/searchPersonal')">
            <div class="icon"><svg-icon icon-class="yitusouren" /></div>
            <div class="name">以图搜人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="left-view">
      <div class="tishi">
        <!-- <div class="left-view-title">使用帮助</div> -->
		<div v-html="data.using_help"></div>
 <!--       <div class="left-view-text">1.一卡通使用帮助</div>
        <div class="left-view-text">2.智能考勤系统手册</div>
        <div class="left-view-text">3.停车系统使用手册</div>
        <div class="left-view-text">4.智能视频操作手册</div> -->
      </div>

      <div class="weixin">
        <div class="ewm">
			<viewer :images="[data.QRCode]">
				<img :src="data.QRCode" style="cursor: pointer;max-width: 112px;" />
			</viewer>
          <!-- <img :src="data.QRCode"> -->
        </div>
        <div class="ewm-name">省技师一卡通小程序</div>
        <el-link type="primary" @click="downloadIamge(data.QRCode,'省技师一卡通小程序二维码')" :underline="false" target="_blank">下载二维码</el-link>
      </div>

      <div class="kefu">
        <div style="font-weight: 600;">平台客服</div>
        <div>联系电话：{{data.customer_service_phone}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from './components/LineChart'
import {downloadIamge,getCurrentDate} from '@/utils/index.js'
import {getConsole} from '@/api/home.js'
export default {
  name: 'Home',
  components: {
    LineChart
  },
  data() {
    return {
      lineChartData: {
        data1: [],
        data2: [],
		xData:[]
      },
	  isShow: false,
	  data:''
    }
  },
  watch: {

  },
  mounted() {
	  this.getConsole()
  },
  methods: {
	getConsole() {
		getConsole().then(res => {
			if(res.state) {
				this.data = res.data
				this.lineChartData.xData = res.data.chart_data.x.reverse()
				if(res.data.chart_data && res.data.chart_data.y.length){
					res.data.chart_data.y.reverse().forEach(item => {
						this.lineChartData.data1.push(item.order_sum)
						this.lineChartData.data2.push(item.income_money_sum)
					})
				}
				this.getTimeArr()
			}else{
				
			}
		})
	},
	downloadIamge(imgsrc,name) {
		downloadIamge(imgsrc,name)
	},
	toPage(url){
		this.$router.push({path:url})
	},
	getTime() {
		return getCurrentDate(0,'.')
	},
	getTimeArr(){
		// let list = []
		// for (let i = 6; i >= 0; i--) {
		// 	list.push(getCurrentDate(-i,'.').substr(5,5))	
		// }
		// this.lineChartData.xData = list
		setTimeout(() => {
			this.isShow = true
		}, 200)
	}
  }
}
</script>

<style lang="scss" scoped >

	.app-container-index {
		height:calc(100vh - 120px);
		padding: 0;
		display: flex;
		.content-view{
			overflow-y: auto;
			padding: 10px;
			width: calc(100% - 300px);
			.content-row{
				background: #FFFFFF;
				border-radius: 2px;
				margin-top: 6px;
			}
		}
		/* scroll-view 不显示滚动条 */
		::-webkit-scrollbar {
		  width: 0;
		  height: 0;
		  background-color: transparent;
		}
		.left-view{
			height: calc(100vh - 120px);
			padding: 30px;
			width: 300px;
			background: #F9F9F9;
			position: relative;
			.tishi{
				.left-view-title{
					margin-top: 17px;
					margin-bottom: 31px;
					font-size: 18px;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.85);
					line-height: 22px;
				}
				.left-view-text{
					font-size: 14px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
					line-height: 22px;
					margin-bottom: 20px;
				}
			}
			.kefu{
				position: absolute;
				bottom:32px ;
				font-size: 14px;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
				line-height: 22px;
				div{
					margin-top: 5px;
				}
			}
			.weixin{
				margin-top: 60px;
				.ewm{
					width: 112px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.ewm-name{
					margin: 10px 0;
					font-size: 14px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
					line-height: 22px;
				}
			}
		}

		.tongji{
			width: 100%;
			padding:10px;
		}
		.list{
			display: flex;
			justify-content: space-around;
			padding: 27px;
			.col{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.icon{
					font-size: 30px;
					color: #ffffff;
					background:#1890FF ;
					width: 51px;
					height: 51px;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.name{
					font-size: 18px;
					font-weight: 400;
					color: #666666;
					line-height: 22px;
					margin-top: 12px;
					margin-bottom: 7px;
				}
				.number-msg{
					font-size: 14px;
					font-weight: 400;
					color: #000000;
					line-height: 20px;
				}
			}
		}
		.icon-list{
			cursor: pointer;
			display: flex;
			justify-content: space-around;
			padding: 27px;
			.col{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 104px;
				height: 90px;
				border: 1px solid #EEEEEE;
				.icon{
					color: #999999!important;
					font-size: 38px;
				}
				.name{
					font-size: 14px;
					font-weight: 500;
					color: #000000;
					line-height: 22px;
					margin-top: 5px;
				}
			}
		}
		.number-list{
			display: flex;
			justify-content: space-around;
			padding: 20px;
			.col{
				.col-title{
					font-size: 14px;
					font-weight: 400;
					color: #666666;
					line-height: 22px;
				}
				.col-number{
					font-size: 16px;
					font-weight: 600;
					color: #000000;
					line-height: 22px;
					margin-top: 4px;
				}
			}
		}
	}

	/* 波纹效果 */
	.active-2 {
		    position: relative;
		    /* //隐藏溢出的径向渐变背景 */
		    overflow: hidden;
		}

	.active-2:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		pointer-events: none;
		/* //设置径向渐变 */
		background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
		background-repeat: no-repeat;
		background-position: 50%;
		transform: scale(10, 10);
		opacity: 0;
		transition: transform .3s, opacity .5s;
	}

	.active-2:active:after {
		transform: scale(0, 0);
		opacity: .3;
		/* //设置初始状态 */
		transition: 0s;
	}
</style>
